<template>
	<view>
		数据的绑定过{{num}}
		<view class="" v-text="num"> </view>
		<!-- 绑定标签的 -->
		<view class="" v-html="html"> </view>
		<!-- 只渲染一次 -->
		<view class="" v-once="str"> </view>
		<!-- 可以进性简单的运算 ,表达式-->
		数据的绑定过{{num+10}}
		数据的绑定过{{num-10}}
		{{str+"你好"}}
		<!-- 属性的绑定 -->
		<view :num='num' :class="str">
			属性的绑定
		</view>


		<!-- 指令 -->
		<view class="" v-if="num>20">
			nnum>20了
		</view>
		<view class="" v-else>
			num小于20
		</view>
		<view v-for="(item,index) in dataList" :key="index">
			{{item.id}}--{{item.name}}
		</view>
		<view class="" v-show="num<20">
			nnum>20了
		</view>
		<button type="default" @click="myclick(123,$event)"> 点击事件</button>
		<!--  和小程序一样, input来捕获,获取的数据,detail.value -->
		<input type="text" value="" v-model="str" @input="myi" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
						id: 1,
						name: "张三"
					},
					{
						id: 2,
						name: "李四"
					},
				],
				str: 'tom',
				num: 10,
				html: '<h1>我是标签</h1>'
			}
		},
		methods: {
			myclick(msg, e) {
				console.log(msg, e)
			},
			myi(e) {
				console.log(e.detail.value)
			}

		}
	}
</script>

<style>

</style>
